<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Metrics
    </h1>
  </p.levelLeft>
</PageHeader>

<div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics>
  <nav class="tabs">
    <ul>
      <LinkTo @route="vault.cluster.metrics.index" @tagName="li" @activeClass="is-active">
        <LinkTo @route="vault.cluster.metrics.index" data-test-usage-tab={{true}}>
          Vault usage
        </LinkTo>
      </LinkTo>
      {{#if model.config.configPath.canRead}}
        <LinkTo @route="vault.cluster.metrics.config" @tagName="li" @activeClass="is-active">
          <LinkTo @route="vault.cluster.metrics.config" data-test-configuration-tab={{true}}>
            Configuration
          </LinkTo>
        </LinkTo>
      {{/if}}
    </ul>
  </nav>
</div>

{{#if (eq model.config.queriesAvailable false)}}
  {{#if (eq model.config.enabled "On")}}
    <EmptyState @title="No data is being received" @message="We haven't yet gathered enough data to display here. We collect it at the end of each month, so your data will be available on the first of next month. It will include the current namespace and all its children." />
  {{else}}
    <EmptyState @title="No data is being received" @message='Tracking is disabled, and no data is being collected. To turn it on, edit the configuration.'>
      <p><LinkTo @route="vault.cluster.metrics.config">Go to configuration</LinkTo></p>
    </EmptyState>
  {{/if}}
{{else}}
  <div class="box is-sideless is-fullwidth is-marginless is-bottomless">
    {{#if (eq model.config.enabled 'Off')}}
      <AlertBanner
        data-test-tracking-disabled
        @type="warning"
        @title="Tracking is disabled"
      >
        This feature is currently disabled and data is not being collected. <LinkTo @route="vault.cluster.metrics.edit">Edit the configuration</LinkTo> to enable tracking again.
      </AlertBanner>
    {{/if}}
    <p class="has-bottom-margin-s">The active clients metric contributes to billing. It is collected at the end of each month alongside unique entities and direct active tokens. The data below includes the current namespace and all its children.</p>
    <PricingMetricsDates
      @queryStart={{model.queryStart}}
      @queryEnd={{model.queryEnd}}
      @resultStart={{model.activity.startTime}}
      @resultEnd={{model.activity.endTime}}
      @defaultSpan={{model.config.defaultReportMonths}}
      @retentionMonths={{model.config.retentionMonths}}
    />
    {{#unless model.activity.total}}
      <EmptyState @title="No data found" @message="No data exists for that query period. Try searching again." />
    {{else}}
      <div class="selectable-card-container">
        <SelectableCard
          @cardTitle="Active clients"
          @total={{model.activity.total.clients}}
          @subText="Current namespace"
        />
        <SelectableCard
          @cardTitle="Unique entities"
          @total={{model.activity.total.distinct_entities}}
          @subText="Current namespace"
        />
        <SelectableCard
          @cardTitle="Active direct tokens"
          @total={{model.activity.total.non_entity_tokens}}
          @subText="Current namespace"
        />
      </div>
    {{/unless}}
  </div>
{{/if}}
